<template>
	<view class="basic tn-safe-area-inset-bottom">
		<scroll-view class="scroll" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
			@refresherrefresh="handleRefresh" @scrolltolower="loadMore">
			<swiperList :swiper="swiper" @start="start"></swiperList>
			<view class="square">
				<view class="square-title">广场</view>
				<view class="square-list">
					<view class="list" v-for="(item,index) in squareList" :key="index" @click="createElement(item)">
						<image :src="item.user_file_url" style="width: 316rpx;height: 210rpx;" mode="aspectFill">
						</image>
						<view class="bom">
							<view class="title">{{item.sample_description}}</view>
							<view class="zp">
								<view class="z">
									{{item.dance_action_name}}
								</view>
								<view class="p">
									综合得分{{item?item.score:0}}分
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="noData" class="isloading">没有数据啦~</view>
			</view>
		</scroll-view>
		<tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
	import swbj from "@/static/image/swbg.png"
	import swbjf from "@/static/image/swbgf.png"
	import user1 from "@/static/image/user1.jpg"
	import user2 from "@/static/image/user2.jpg"
	import swiperList from "./swiper.vue"
	import {
		GetSquareListAPI
	} from "@/api/index.js"
	export default {
		name: 'Basic',
		components: {
			swiperList
		},
		data() {
			return {
				swiper: [],
				squareList: [],
				pic: this.$websiteUrl + 'static/web_files/user.png',
				page: 1, // 当前页码
				pageSize: 10,
				isLoading: false, // 是否正在加载更多
				isRefreshing: false, // 是否正在刷新
				noData: false, // 没有更多数据了
				totalPages: 0,
				type: 0,
				like: true,
				comment: true
			}
		},
		mounted() {
			this.GetSquareList()
			this.GetSquareOne()
		},
		methods: {
			async GetSquareOne(){
				this.swiper = []
				const data = {
					page: 1,
					limit: 1,
					call_type: 1,
				}
				const res = await GetSquareListAPI(data)
				if (res.code == 2000) {
					this.swiper.push({
						flag: true,
						Image: swbj,
						top: this.pic,
						title: '今日挑战',
						content: res.data.length != 0 ? res.data[0].dance_action_name : '您还没有挑战',
						info: '在休假日也不要忘记加强练习',
						children: [{
								pic: user1,
							},
							{
								pic: user2,
							},
							{
								pic: '',
							}
						]
					}, {
						flag: false,
						Image: swbjf,
						fraction: res.data.length != 0 ? res.data[0].score : 0,
						title: '考级分数',
						content: res.data.length != 0 ?
							`上次你的分数是${res.data.length!=0?res.data[0].score:0}，表现不错，再接再厉` : '您还没有分数，快去试试吧！',
					})
				}
			},
			async GetSquareList() {
				const data = {
					page: this.page,
					limit: this.pageSize,
					call_type: 1,
					query_type:'query_all'
				}
				const res = await GetSquareListAPI(data)
				if (res.code == 2000) {
					this.squareList = [...this.squareList, ...res.data]
					this.totalPages = res.total
					if (this.squareList.length >= this.totalPages) {
						this.noData = true;
					} else {
						this.page += 1;
					}
					this.isRefreshing = false;
				}
			},
			start() {
				const data = {
					index: 1
				}
				const objStr = encodeURIComponent(JSON.stringify(data))
				wx.reLaunch({
					url: `/pages/index/index?userInfo=${objStr}`
				})
			},
			createElement(item) {
				const data = {
					dialogue: item.answer,
					photoPath: item.user_file_url,
				}
				const objStr = encodeURIComponent(JSON.stringify(data))
				wx.reLaunch({
					url: `/basicPage/Reporting/index?photo=${objStr}`
				})
			},
			handleRefresh() {
				if (this.isRefreshing) return;
				this.isRefreshing = true;
				this.page = 1
				this.pageSize = 10
				this.squareList = []
				this.GetSquareList()
				this.GetSquareOne()
			},
			// 加载更多
			loadMore() {
				if (this.noData) return;
				this.GetSquareList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.basic {
		height: 100%;
		overflow-y: auto;

		.scroll {
			height: 100%;
			padding-bottom: 320rpx;
		}

		.square {
			padding: 0 48rpx;

			.square-title {
				font-weight: 500;
				font-size: 40rpx;
				color: #2D3142;
				line-height: 56rpx;
				text-align: left;
				font-style: normal;
				margin-bottom: 24rpx;
			}

			.square-list {
				display: flex;
				flex-wrap: wrap;

				.list {
					width: 316rpx;
					height: 322rpx;
					margin-right: 22rpx;
					margin-bottom: 24rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(112, 136, 210, 0.1);
					border-radius: 28rpx;

					image {
						// background-color: #f5dbff;
						border-radius: 28rpx;
						margin-bottom: 16rpx;
					}

					.bom {

						padding: 0 16rpx;

						.title {
							height: 36rpx;
							margin-bottom: 8rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #2D3142;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
						}

						.zp {
							display: flex;
							font-weight: 400;
							font-size: 20rpx;
							color: #818AA6;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;

							.z {
								flex: 3;
								  overflow:hidden;
								  white-space: nowrap;
								  text-overflow: ellipsis;
								  -o-text-overflow:ellipsis;
							}

							.p {
								display: flex;
								justify-content: flex-end;
								flex: 4;
							}
						}

					}
				}

				.list:nth-child(2n) {
					margin-right: 0;
				}

			}
			.isloading {
				color: #c6c6c6;
				font-size: 25rpx;
				text-align: center;
			}
		}
	}
</style>